﻿@{
    ViewBag.Title = "Index";
}
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
    <title>用户管理中心</title>
    <link href="~/Content/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />

    <script src="~/Content/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script src="~/Content/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script src="~/Content/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
    @*修改时间格式的Js文件*@
    <script src="~/Content/jquery-easyui-1.3.1/datapattern2.js"></script>
    <script src="~/Scripts/ckeditor/ckeditor.js"></script>

    <script type="text/javascript">
        $(function () {

            //初始化弹出窗体
            initTable();
            BindAddButtonClickEvent();
            BingUpdateDetailsShowTextBox();

        });

        //初始化表格 
        function initTable(queryData) {
            $('#test').datagrid({
                title: '用户管理',
                iconCls: 'icon-save',
                height: 300,
                nowrap: true,
                autoRowHeight: false,
                striped: true,
                collapsible: true,
                url: '/UserInfo/GetAllUser',
                sortName: 'ID',
                sortOrder: 'asc',
                //striped:true,
                border: true,
                remoteSort: false,
                idField: 'ID',
                pagination: true,
                rownumbers: true,
                queryParams: queryData,
                columns: [[
                    { field: 'ck', checkbox: true },
					{ field: 'ID', title: 'ID', width: 50, sortable: true },
					{ field: 'UserName', title: '姓名', width: 100, sortable: true },
                    { field: 'PassWord', title: "密码", width: 150, sortable: true}                    
                ]],

                toolbar: [{
                    id: 'btnadd',
                    text: '添加用户',
                    iconCls: 'icon-add',
                    handler: function () {
                        //实现弹出添加的层
                        ShowAddUaerDialog();
                    }
                }, '-', {
                    id: 'btncut',
                    text: '修改密码',
                    iconCls: 'icon-cut',
                    handler: function () {
                        //实现弹出修改用户信息的层
                        ShowUpdateUserDialog();
                    }
                }, '-', {
                    id: 'btnsave',
                    text: '删除用户',
                    iconCls: 'icon-remove',
                    handler: function () {

                        DeleteUserInfoByClick();
                    }
                }]
            });
        }

        //弹出添加管理员对话框
        function ShowAddUaerDialog() {
            //弹出添加用户的对话框
            $('#AddUserDialog').dialog('open').dialog('setTitle', '添加管理员信息');
            //添加完成后清空文本框的值
            ClearTextBox();
            
        }

        //管理员添加事件
        function BindAddButtonClickEvent() {
            $("#btnAdd").click(function () {
                //验证所有的文本框是否通过验证
                var valid = $('#AddUserInfo').form('validate');
                if (valid == false) {
                    return false;
                }
                //创建传递的参数, //Name,Pwd,PwdOK
                var postdata = {
                    UserName: $("#UserName1").val(),
                    PassWord: $("#PassWord1").val()
                };
                //发送异步请求到后台保存管理员数据
                $.post("/UserInfo/AddUser", postdata, function (data) {
                    if (data == "OK") {
                        //添加成功，(1)关闭对话框，刷新表格
                        alert("添加成功");
                        $('#AddUserDialog').dialog('close');
                        $("#test").datagrid("reload");
                    }
                    else {
                        alert("添加失败，请您检查");
                    }
                });
            });
        }

        //当添加或者修改完成后清空文本框中的值
        function ClearTextBox() {
            //UName,Pwd,PwdOK
            $("#UserName1").val("");
            $("#PassWord1").val("");
            $("#PwdOK2").val("");
        }

        //弹出修改管理员的对话框
        function ShowUpdateUserDialog() {
            var UpdateUserInfoID = $("#test").datagrid("getSelections");
            if (UpdateUserInfoID.length == 1) {
                $("#UpdateUserDialog").dialog("open").dialog("setTitle", "修改用户信息");

                //绑定显示修改的详细信息的内容
                BingUpdateDetailsShowTextBox();
                BindUpdateButtonClickEvent();
            }
            else {
                $.messager.alert("友情提示", "每次只能修改一行数据，你已经选择了<font color='red' size='6'>" + UpdateUserInfoID.length + "</font>行");
            }
        }

        function BingUpdateDetailsShowTextBox() {
            //首先获取选中的用户的ID
            var CheckID = $("#test").datagrid("getSelections")[0].ID;

            //使用异步的getJSON请求绑定前台传递过来的数据
            $.getJSON("/UserInfo/GetBindDetails", { ID: CheckID }, function (date) {
                $("#ID").val(CheckID);
                $("#UserName").val(date.UserName);
                $("#PassWord").val(date.PassWord);
                $("#PwdOK1").val(date.PassWord);
            });
        }


        //实现多选删除信息
        function DeleteUserInfoByClick() {
            var deleteUserInfoID = $("#test").datagrid("getSelections");
            if (deleteUserInfoID.length >= 1) {
                var ids = "";  
                for (var i = 0; i < deleteUserInfoID.length; i++) {
                    ids += deleteUserInfoID[i].ID + ",";
                }
                //去掉最后的一个,
                ids = ids.substring(0, ids.length - 1);

                //遍历出删除用户的信息
                var UNameList = "";
                for (var i = 0; i < deleteUserInfoID.length; i++) {
                    UNameList += deleteUserInfoID[i].UserName + ",";
                }
                UNameList = UNameList.substring(0, UNameList.length - 1);
                //发送异步请求删除数据
                $.messager.confirm("删除信息", "您确认删除<font color='Red' size='3'>" + UNameList + "</font>用户吗？", function (DeleteUserInfo) {
                    if (DeleteUserInfo) {
                        $.post("/UserInfo/DeleteUserInfo", { deleteUserInfoID: ids, UName: UNameList }, function (data) {
                            if (data == "OK") {
                                $.messager.alert("友情提示", "删除成功");
                                $("#test").datagrid("reload");
                                $("#test").datagrid("clearSelections");
                            }
                            else {
                                $.messager.alert("友情提示", "删除失败:" + data);
                            }
                        });
                    }
                });
            }
            else {
                $.messager.alert("友情提示", "请您选择要删除的数据");
            }
        }
        //修改用户的信息
        function BindUpdateButtonClickEvent() {
            $("#btnUpdate").click(function () {
                //首先判断前台的验证是否通过
                var valid = $('#UpdateUserInfo').form('validate');
                if (valid == false) {
                    return false;
                }

                //构造需要修改的参数，//UName1，Pwd1，PwdOK1，Phone1，Mail1
                var postData = {
                    ID: $("#ID").val(),
                    UserName: $("#UserName").val(),
                    PassWord: $("#PassWord").val()
                };

                //使用异步实现修改用户信息
                $.post("/UserInfo/UpdateInfo", postData, function (date) {
                    if (date == "OK") {
                        $("#UpdateUserDialog").dialog('close');
                        $("#test").datagrid('reload');
                    }
                    else {
                        alert("修改失败，请检查");
                    }
                });
            });
        }
        </script>
</head>
<body>
    <fieldset>
        <legend>用户查询</legend>
    <div>
        <label for="txtName">用户姓名：</label>
        <input type="text" ID="txtSerachName" name="txtName"  />&nbsp;&nbsp;
         
        <a href="#" class="easyui-linkbutton" iconcls="icon-search" id="btnSerach"  name="btnSerach">模糊搜索</a>
    </div>
    </fieldset>
    <div>
        <table id="test"></table>
    </div>
     @*----------------------------设置修改的的弹出层--------------------------------*@
    <div id="UpdateUserDialog" class="easyui-dialog" style="width:360px;height:300px;padding:10px 20px"
			closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="UpdateUserInfo" method="post" novalidate="novalidate">
            <table id="tblUpdate">
                <tr>
                    <th colspan="2" >修改管理员信息</th>
                </tr>
                <tr>
                    <td><label for="ID">用户ID:</label></td>
                    <td><input class="easyui-validatebox" type="text" id="ID" name="ID" readonly="true"/></td><td>
                </tr>
                <tr>
                    <td><label for="UserName">用户名：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="UserName" name="UserName" data-options="required:true,validType:'length[1,32]'" readonly="true" /></td><td>
                </tr>
                <tr>
                    <td><label for="PassWord">密码：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="PassWord" name="PassWord"  data-options="required:true,validType:'length[1,32]'" /></td>
                </tr>
                <tr>
                    <td><label for="PwdOK1">确认密码：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="PwdOK1" name="PwdOK" data-options="required:true" validType="equalTo['PassWord']" invalidMessage="两次输入密码不匹配" /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpdate" iconcls="icon-ok" >确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#UpdateUserDialog').dialog('close')">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    @*-------------------添加弹出层------------------*@
    <div id="AddUserDialog" class="easyui-dialog" style="width:360px;height:250px;padding:10px 20px" closed="true" resizable="true" model="true" buttons="#dlg-buttons" align="center">
        <form id="AddUserInfo" method="post" novalidate="novalidate">
            <table id="tblAdd">
                <tr>
                    <th colspan="2">添加管理员</th>
                </tr>
                <tr>
                    <td><label for="UserName">用户名：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="UserName1" name="UserName" data-options="required:true,validType:'length[1,32]'"/></td><td>
                </tr>
                <tr>
                    <td><label for="PassWord">密码：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="PassWord1" name="PassWord"  data-options="required:true,validType:'length[1,32]'" /></td>
                </tr>
                <tr>
                    <td><label for="PwdOK1">确认密码：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="PwdOK2" name="PwdOK" data-options="required:true" validType="equalTo['PassWord']" invalidMessage="两次输入密码不匹配" /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" id="btnAdd" iconcls="icon-ok" >确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#AddUserDialog').dialog('close')">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>